<template>
  <view class="oreo-cell" @click="clickBtn">
    <view class="cell-content">
      <view class="label" :style="labelStyle">{{ label }}</view>
      <view class="content">
        <slot></slot>
      </view>
      <view class="cell-arrow" :class="{ scroll }" @click.stop="arrowBtn">
        <slot v-if="!arrow" name="suffix"></slot>
        <image v-else :src="ossImg('others/component/arrow.png')" />
      </view>
    </view>
  </view>
</template>

<script setup>
import { defineEmits, defineProps } from "vue";
import { ossImg } from "@/utils/utils";

const props = defineProps({
  label: {
    type: String,
    default: "-",
  },
  scroll: {
    type: Boolean,
    default: false,
  },
  labelStyle: {
    type: Object,
    default: () => ({}),
  },
  arrow: {
    type: Boolean,
    default: true,
  },
});
const emits = defineEmits(["arrow", "click"]);

const clickBtn = () => {
  getApp().emdlz(
    "track",
    "event",
    "store_page",
    "click",
    "coupon1_receive",
    ""
  );
  emits("click");
};

const arrowBtn = () => {
  getApp().emdlz(
    "track",
    "event",
    "store_page",
    "click",
    "coupon2_receive",
    ""
  );
  emits("arrow");
};
</script>

<style lang="less" scoped>
.oreo-cell {
  width: 100%;
  height: 50px;
  box-sizing: border-box;
  background: #ffffff;
  display: flex;
  align-items: center;
  padding: 0 15px;

  .cell-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    border-bottom: 1px solid #e8e8e8;

    .content {
      overflow: auto;
      flex: 1;
      font-size: 14px;
      color: #0d0d0d;
    }
  }

  .label {
    color: #979797;
    font-size: 14px;
    margin-right: 20px;
    white-space: nowrap;
  }
}

.cell-arrow {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  &.scroll {
    min-width: 40px;
    box-shadow: -3px 0 4px -1px rgba(0, 0, 0, 0.12);
  }

  image {
    width: 5px;
    height: 10px;
  }
}
</style>
